<template>
    <div class="commonly-used">
        
        <div class="label">
            <span style="font-weight:bold;">常用地址</span> 
            <span>快速直达常用地址</span> 
            <span class="up"><i class="iconfont">&#xe676;</i></span>
            <span class="down"><i class="iconfont">&#xe677;</i></span> 
                
            <div class="hover-content">

                <info-card-new>
                    <div class="title" slot="left" style="font-size:12px;">
                        <span style="font-weight:bold;">常用地址</span> 
                        <span>&nbsp;快速直达常用地址</span>
                    </div>

                    <div slot="right">
                        <template v-if="dataList.length <= 0">
                            <el-link v-if="btnStatus =='add'" :underline="false" type="primary" @click="addOrEdit"><i class="el-icon-circle-plus-outline"></i> 添加</el-link>
                            <el-link v-if="btnStatus =='submit'" :underline="false" type="primary" @click="submit">提交</el-link>
                        </template>
                        <el-link v-if="dataList.length > 0" :underline="false" type="primary" @click="addOrEdit"><i class="el-icon-edit"></i> 编辑</el-link>
                    </div>

                    <div slot="operation">
                        <template v-if="rightItemStatus.bottom =='open'">
                            <template v-if="dataList.length > 0">
                                <div class="cy-item" v-for="item in dataList" :key="item.index">
                                    <div class="item">
                                        <div class="point"></div>
                                        <div class="name" @click="detail(item)" 
                                        v-czc="['首页', '打开弹窗' , '常用地址' ,0 , `home-dialog-commonUrl`]"
                                        > {{item.name}}</div>
                                    </div>
                                </div>
                            </template>

                            <template v-else>
                                <div class="empty">
                                    <el-link type="info" :underline="false">
                                        您还未设置常用功能 · 赶快
                                        <span class="add" @click="addOrEdit">添加</span> 吧!
                                    </el-link>
                                </div>

                                <div class="recommend-checks" v-if="recommendList.length > 0">
                                    <div class="tjtj">
                                        <span>推荐添加:</span>
                                    </div>
                                    <div class="checks">
                                        <el-checkbox-group v-model="recommendCheckedList">
                                            <el-tooltip v-for="item in  recommendList" :key="item.guid" effect="dark" :content="item.name" placement="right">
                                                <el-checkbox :label="item.guid" >
                                                    {{item.name}}
                                                </el-checkbox>
                                            </el-tooltip>
                                        </el-checkbox-group>
                                    </div>
                                    
                                </div>

                            </template>
                        </template>
                    </div>

                </info-card-new>
            </div>
        </div>

        <div class="mask">

        </div>
        
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="50%"
            @close='closeDialog'
            :close-on-click-modal="false"
        >   
            <used-tabs ref="usedTabs" :dialogVisible.sync="dialogVisible" :guidArr="guidArr" :afterSubmit="afterSubmit"></used-tabs>
        </el-dialog>

        <el-dialog
            title=""
            :visible.sync="detailDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >   
            <plat-detail :code="countyCode" :full-city-name="fullCityName"></plat-detail>
        </el-dialog>
    </div>
</template>

<script>
import InfoCardNew from "../../components/info-card-new.vue";
import UsedTabs from './components/used-tabs.vue';
import platDetail from '../trading-platform/components/detail.vue';

import { mapGetters, mapActions } from 'vuex';


export default {
    head: {},
    mixins:[],
    components: {
        InfoCardNew,
        UsedTabs,
        platDetail
    },
    props: {
        rightItemStatus: {
            type: Object,
            default: () => ({})
        }
    },
    data: () => ({
        dialogVisible:false,
        dataList:[],
        recommendList:[],
        recommendCheckedList:[],
        btnStatus:'add', //按钮状态 'add'编辑，'submit'提交
        detailDialogVisible:false,
        currentRecommend:{},//所点击常用,
        countyCode:'',
        fullCityName:'',
    }),
    computed: {
        ...mapGetters({
            getNickname: 'userinfo/getNickname'
        }),
        guidArr(){
            return this.dataList.map(item => item.guid)
        }
    },
    watch: {
        recommendCheckedList: {
            deep: true,
            handler(n, o) {
                if(n.length > 0){
                    this.btnStatus = "submit"
                }else{
                    this.btnStatus = "add"
                }
            }
        }
    },
    methods: {
        getData(){
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.tbUrl}/home/commonlist.json`,
                data: {},
                callback: function (data, res) {
                    this.dataList = data
                },
                error: function () {},
            });
        },
        getRecommonduse(){
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.tbUrl}/home/recommonduse.json`,
                data: {},
                callback: function (data, res) {
                    this.recommendList = data
                },
                error: function () {},
            });
        },
        afterSubmit(){
            this.getData();
            this.dialogVisible = false;
        },
        closeDialog(){
            this.$refs['usedTabs'].cancel();
        },
        submit(){
            const that = this;
            let len = this.recommendCheckedList.length;
            if(len > 0){
                let idsString = that.recommendCheckedList.toString();
                that.$ajax({
                    type: "post",
                    url: `${that.$store.state.api.tbUrl}/home/commonedit.json`,
                    data: {
                        navigates:idsString
                    },
                    callback: function (data, res) {
                        ShowMsg( '添加成功', 'success');
                        that.getData();
                    },
                    error: function () {},
                });
            }else{
                return
            }
        },
        /**
         * 详情
         * @param {Object} item 所选项
         */
        detail(item){
            if(item.type == 'jyzx'){
                // this.currentRecommend = item
                this.countyCode = item.code;
                this.fullCityName = item.name;
                this.detailDialogVisible = true;
            }else{
                if (!item.url) {
                    showMsg('暂无信息');
                    
                    return;
                }

                window.open(item.url)
            }
        },
        addOrEdit(){
            if(this.getNickname){
                this.dialogVisible = true;
                let obj = {
                    top:'shrink',
                    bottom:'open'
                };
                this.$emit('update:rightItemStatus',obj);
            }else{
                // ShowMsgBox('登录后才能使用本功能', 'warning')
                this.showLogin();
            }
        },
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
    },
    mounted() {
        this.getData();
        this.getRecommonduse();
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";

    .commonly-used {
        position: relative;
        height: 42px;
        width: 100%;
        background-image: url('~@images/tou-biao-e-zhan/位图3.png');
        background-repeat:no-repeat;
        background-size: cover;

        .label{
            z-index: 50 !important;
            height: 100%;
            position: relative;
            line-height: 42px;
            text-align: center;
            color: white;
            cursor: pointer;
            .up{
                display: none;
            }
            .iconfont{
                font-size: 14px;
            }
        }
        .label:hover{
            box-shadow: 0 2px 12px 0 #00d5c8;
        }

        .label:hover .hover-content{
            visibility:visible;
            overflow: auto;
            // opacity: 1;
            // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            max-height: 300px;
        }
        .label:hover .up{
            display: inline-block;
        }
        .label:hover .down{
            display: none;
        }

        .hover-content{
            cursor: auto;
            visibility: hidden;
            overflow: hidden;
            max-height: 0px;
            position: absolute;
            top:42px;
            width: 100%;
            background-color: white;
            color: #000;
            left: 50%; 
            transform:translate(-50%,0);
            transition: all 0.7s;

            .empty {
                height: 100px;
                width: 100%;
                display: flex;
                justify-content: center;

                a {
                    cursor: auto;
                }
                .el-link{
                    color: $primaryColor;
                }
                .add {
                    color: $primaryColor;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
            .recommend-checks {
                margin: 0 auto;
                width: 86%;
                display: flex;
                justify-content:space-between;

                .tjtj {
                    width: 67px;
                    flex-shrink:0
                }
                ::v-deep .el-checkbox {
                    display: flex;
                    align-items: baseline;
                    
                }
                ::v-deep .el-checkbox__input {
                    display: block;
                }

                ::v-deep .el-checkbox__label {
                    max-width: 150px;
                    overflow: hidden;
                    display: block;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
            }

            .cy-item {
                color: $primaryColor;
                width: 100%;
                padding: 0 5px;
                .item{
                    width: 100%;
                    line-height: 1.8em;
                    display: flex;
                    align-items: center;

                    .point{
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: $primaryColor;;
                    }
                    .name{
                        margin-left: 10px;
                        cursor: pointer;
                    }
                    .name:hover{
                        font-weight: bold;
                    }
                }

   
            }

        }
        .label:hover + .mask {
            // visibility: visible;
            // opacity:0.3;
        }
        .mask{
            visibility: hidden;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background:#797a7d;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.5s;
        }


        ::v-deep .el-dialog__header {
            padding-bottom: 20px;
        }
        ::v-deep .el-dialog__body{
            padding-top: 20px;
        }
}
</style>
 